<template>
	<div>
		<el-cascader ref="eleCad"
		v-model='selectValue' 
		:style="{'width':width}" 
		@change="getSelectData" 
		:options="options" 
		:props="defaultProps" 
		:disabled='disabled'
		placeholder="选地址"
		clearable>
		</el-cascader>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		props: {
			value:'',
			width: { 
			    type: String,
			    default(){
			        return '100%'  // 默认
			    }
			},
			propStr: {  // 下拉框的value取值
				type: String,
				default(){
				    return 'code'  // 默认
				}
			},
			disabled:{
				type: Boolean,
				default(){
				    return false  // 默认
				}
			},
			types:{
				type:Number
			}
		},
		data() {
			return {
				selectValue:this.value,
				options: [],
				defaultProps: {
					children: 'sub',
					label: 'name',
					value:this.propStr
				},
				codeSuffix:'000000' // 编码后面加6个0
			};
		},
		watch:{
			// 监听父组件v-model值动态改变时，同步更新
			value(newValue, oldValue){
			    this.selectValue = newValue
			},
		},
		created() {
			this.getAddress()
		},
		methods: {
			getAddress(code){
				axios.get('/master/json/area.json')
				.then(res=>{
					this.options = res.data
				})
				
			},
			getSelectData(data){
				this.$emit('input',this.selectValue)   // 通过 input 事件带出数值 ，this.selectValue为选择的value值的数组 
			},
			getCheckedNodes(){
				const [Node] = this.$refs.eleCad.getCheckedNodes()  // 获取选择中的节点（对象）
				if(!Node) return false
				const selectNode = Node
				let addressObj = {
					province:{},
					city:{},
					district:{}
				}
				if(selectNode.level==2){ // 两级：市-区县
					addressObj.district = { // 区县
						code:selectNode.data.code+this.codeSuffix,  // 区县代码
						name:selectNode.data.name // 	区县名称
					}
					addressObj.city = {  // 城市
						code:selectNode.parent.data.code+this.codeSuffix,  // 城市代码
						name:selectNode.parent.data.name  // 城市名称
					}
				}else if(selectNode.level==3){ // 三级：省-市-区县
					addressObj.district = { // 区县
						code:selectNode.data.code+this.codeSuffix,  // 区县代码
						name:selectNode.data.name // 	区县名称
					}
					addressObj.city = {  // 城市
						code:selectNode.parent.data.code+this.codeSuffix,  // 城市代码
						name:selectNode.parent.data.name  // 城市名称
					}
					addressObj.province = { // 省
						code:selectNode.parent.parent.data.code+this.codeSuffix,// 省代码
						name:selectNode.parent.parent.data.name // 省名称
					}
				}
				return addressObj
			}
		}
	}
</script>

